<div ng-controller="StateInteraction">
  <div ng-if="!hasLoaded" class="oppia-align-center">
    Loading
    <span class="oppia-loading-dot-one">.</span>
    <span class="oppia-loading-dot-two">.</span>
    <span class="oppia-loading-dot-three">.</span>
  </div>

  <div class="protractor-test-interaction">
    <div ng-if="hasLoaded">
      <div style="margin-bottom: 20px; margin-top: 10px;">
        <span class="dropdown protractor-test-select-interaction-id" ng-show"editabilityService.isEditable()">
          <a id="tutorialStateInteraction" role="button" data-toggle="dropdown" class="btn btn-default">
            <span ng-if="interactionId">
              <[interactionRepository[interactionId].name]>
            </span>
            <span ng-if="!interactionId">
              Select a type of interaction...
            </span>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu" role="menu">
            <li ng-repeat="interactionId in topLevelInteractionIds track by $index">
              <a href="#"
                 ng-click="onChangeInteractionType(interactionId)"
                 class="protractor-test-top-level-interaction-id-<[interactionId]>">
                <[interactionRepository[interactionId].name]>
              </a>
            </li>
            <li ng-repeat="(category, interactions) in interactionsByCategory"
                class="oppia-dropdown-submenu">
              <a href="#"
                 class="protractor-test-interaction-category">
                <[category]>
              </a>
              <ul class="dropdown-menu">
                <li ng-repeat="interactionId in interactions">
                  <a href="#"
                     ng-click="onChangeInteractionType(interactionId)"
                     class="protractor-test-interaction-id-<[interactionId]>">
                    <[interactionRepository[interactionId].name]>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </span>

        <span ng-if="interactionId && editabilityService.isEditable() && doesCurrentInteractionHaveCustomizations()">
          <a href="" ng-click="openInteractionCustomizerModal()" style="margin-left: 8px;" class="protractor-test-edit-interaction">
            Customize
          </a>
        </span>
      </div>

      <div ng-if="interactionId" style="margin-bottom: 20px;">
        <div angular-html-bind="interactionPreviewHtml" class="oppia-interaction-preview oppia-pre-avatar-user" style="pointer-events: none;">
        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/ng-template" id="modals/customizeInteraction">
  <div class="modal-header">
    <h3>Customize Interaction</h3>
  </div>

  <div class="modal-body">
    <div class="protractor-test-interaction-editor">
      <form name="form.schemaForm">
        <div ng-repeat="customizationArgSpec in customizationArgSpecs track by $index">
          <h3><[customizationArgSpec.description]></h3>
          <div>
            <schema-based-editor local-value="tmpCustomizationArgs[$index].value" schema="customizationArgSpec.schema">
            </schema-based-editor>
            <div style="margin-bottom: 15px;"></div>
          </div>
        </div>
      </form>

    </div>
  </div>

  <div class="modal-footer">
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
    <button class="btn btn-success protractor-test-save-interaction" ng-click="save()" ng-disabled="form.schemaForm.$invalid">Save Customizations</button>
  </div>
</script>
